<template>
	<view class="">
		<!-- 搜索 -->
		<view class=" bg-white d-flex j-center a-center ">
			<view class="bg-light-secondary span-18 rounded-50 d-flex py-1" @click="virtual_seach">
				<u-icon name="search" color="#888888" size="33" class="ml-3 mr-2"></u-icon>
				<input type="text" placeholder="搜索订单号/商品名称/手机号" class="flex-1 w-100"  disabled="true" />
			</view>
		</view>
		<!-- 头部 -->
		<view class="bg-white virtual_tab" >
			<u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="virtual_bar" :current="current" @change="tabsChange" :is-scroll="false"
						swiperWidth="750"></u-tabs-swiper>
		</view>	
		<view class="mt-5 seach" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<!-- 内容 -->
			<swiper :style="{'height':scrollHeight}"  :current="swiperCurrent"  @transition="transition" @animationfinish="animationfinish">
				<swiper-item>
					<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
						<view v-if="all_order.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
							<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
							<view class="">暂无订单</view>
						</view>
						<view v-else  class="order_card m-2 mb-2" @click="virtual_detail(item)" v-for="(item,index) in all_order" :key="index">
							<view class="order_card_head px-3 py-2">
								<view class="d-flex j-sb font-md pt">
									<view class="d-flex a-center">
										<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
											<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
										</view>
										<view class="">{{item.mobile}}</view>
									</view>
									<view class="text-red">{{item.label_order_status}}</view>
								</view>
								<view class="font d-flex j-sb text-666">
									<view class="">{{item.create_time}}</view>
									<view class="">{{item.order_sn}}</view>
								</view>
							</view>
							<view class="bg-white order_card_content p-3">
								<view class="d-flex mb-2" v-for="(items,indexs) in item.goods_items" :key='indexs'>
										<view class="">
											<image class="rounded-20" :src="items.img.url" mode=""></image>
										</view>
										<view class="mx-2 flex-1 ">
											<view class="ellipsis consignee">{{items.goods_name}}</view>
											<view class="d-flex j-sb mt-4">
												<view class="">{{items.formated_shop_price}}</view>
												<view class="">x{{items.goods_number}}</view>
											</view>
										</view>
								</view>
								<view class="mb-2 text-right">共{{item.goods_number}}件，合计：</text><text class="text-000 font-lg font-weight">{{item.formated_total_fee}}</text> </view> 
								<!-- 已付款 -->
								<view class="d-flex order_card_content_footer j-end font-md" v-if="item.label_order_status=='待付款'">
									<view @tap.stop="virtual_payment(item)" v-if="item.pay_code=='pay_balance'||item.pay_code=='pay_cod'">付款</view>
									<view @tap.stop="virtual_price(item)">改价</view>
									<view @tap.stop="close(item)">取消</view>
								</view>
								<!-- 代发货 已完成 -->
								<view class="d-flex order_card_content_footer j-end font-md" v-else-if="item.label_order_status=='待收货'||item.label_order_status=='已完成'">
									<view class=""  @tap.stop="comment(item)">备注</view>
								</view>
								<!-- 已取消 -->
								<view class="d-flex order_card_content_footer j-end font-md" v-else-if="item.label_order_status=='已取消'">
									<view class="" @tap.stop="order_payment(item)">删除</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
						<view v-if="await_pay_order.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
							<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
							<view class="">暂无订单</view>
						</view>
						<view v-else  class="order_card m-2 mb-2" @click="virtual_detail(item)" v-for="(item,index) in await_pay_order" :key="index">
							<view class="order_card_head px-3 py-2">
								<view class="d-flex j-sb font-md pt">
									<view class="d-flex a-center">
										<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
											<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
										</view>
										<view class="">{{item.mobile}}</view>
									</view>
									<view class="text-red">{{item.label_order_status}}</view>
								</view>
								<view class="font d-flex j-sb text-666">
									<view class="">{{item.create_time}}</view>
									<view class="">{{item.order_sn}}</view>
								</view>
							</view>
							<view class="bg-white order_card_content p-3">
								<view class="d-flex" v-for="(items,indexs) in item.goods_items" :key='indexs'>
										<view class="">
											<image class="rounded-20" :src="items.img.url" mode=""></image>
										</view>
										<view class="mx-2 flex-1">
											<view class="ellipsis consignee">{{items.goods_name}}</view>
											<view class="d-flex j-sb mt-4">
												<view class="">{{items.formated_shop_price}}</view>
												<view class="">x{{items.goods_number}}</view>
											</view>
										</view>
								</view>
								<view class="py-2 text-right">共11件，合计：<text class="text-000 font-35 font-weight">￥</text><text class="text-000 font-lg font-weight">22</text> </view> 
								
								<view class="d-flex order_card_content_footer j-end font-md">
									<view @tap.stop="virtual_payment(item)" v-if="item.pay_code=='pay_balance'||item.pay_code=='pay_cod'">付款</view>
									<view @tap.stop="virtual_price(item)">改价</view>
									<view @tap.stop="close(item)">取消</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
						<view v-if="shipped_order.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
							<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
							<view class="">暂无订单</view>
						</view>
						<view v-else class="order_card m-2 mb-2" @click="virtual_detail(item)" v-for="(item,index) in shipped_order" :key="index">
							<view class="order_card_head px-3 py-2">
								<view class="d-flex j-sb font-md pt">
									<view class="d-flex a-center">
										<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
											<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
										</view>
										<view class="">{{item.mobile}}</view>
									</view>
									<view class="text-red">{{item.label_order_status}}</view>
								</view>
								<view class="font d-flex j-sb text-666">
									<view class="">{{item.create_time}}</view>
									<view class="">{{item.order_sn}}</view>
								</view>
							</view>
							<view class="bg-white order_card_content p-3">
								<view class="d-flex" v-for="(items,indexs) in item.goods_items" :key='indexs'>
										<view class="">
											<image class="rounded-20" :src="items.img.url" mode=""></image>
										</view>
										<view class="mx-2 flex-1">
											<view class="ellipsis consignee">{{items.goods_name}}</view>
											<view class="d-flex j-sb mt-4">
												<view class="">{{items.formated_shop_price}}</view>
												<view class="">x{{items.goods_number}}</view>
											</view>
										</view>
								</view>
								<!-- <view class="ellipsis-1 py mt-2">
									<text class="bei_zu mr-2">商家备注</text>该订单赠送100积分该订单赠送100积分该该订单赠送100积分该订单赠该订单赠送100积分该订单赠订单赠送...
								</view> -->
								<view class="py-2 text-right">共{{item.goods_number}}件，合计：</text><text class="text-000 font-lg font-weight">{{item.formated_total_fee}}</text> </view>
								<view class="d-flex order_card_content_footer j-end font-md">
									<view class=""  @tap.stop="comment(item)">备注</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
						<view v-if="finished_order.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
							<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
							<view class="">暂无订单</view>
						</view>
						<view v-else  class="order_card m-2 mb-2" @click="virtual_detail(item)" v-for="(item,index) in finished_order" :key="index">
							<view class="order_card_head px-3 py-2">
								<view class="d-flex j-sb font-md pt">
									<view class="d-flex a-center">
										<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
											<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
										</view>
										<view class="">{{item.mobile}}</view>
									</view>
									<view class="text-red">{{item.label_order_status}}</view>
								</view>
								<view class="font d-flex j-sb text-666">
									<view class="">{{item.create_time}}</view>
									<view class="">{{item.order_sn}}</view>
								</view>
							</view>
							<view class="bg-white order_card_content p-3">
								<view class="d-flex" v-for="(items,indexs) in item.goods_items" :key='indexs'>
										<view class="">
											<image class="rounded-20" :src="items.img.url" mode=""></image>
										</view>
										<view class="mx-2 flex-1">
											<view class="ellipsis consignee">{{items.goods_name}}</view>
											<view class="d-flex j-sb mt-4">
												<view class="">{{items.formated_shop_price}}</view>
												<view class="">x{{items.goods_number}}</view>
											</view>
										</view>
								</view>
								<view class="py-2 text-right">共{{item.goods_number}}件，合计：</text><text class="text-000 font-lg font-weight">{{item.formated_total_fee}}</text> </view>
								
								<view class="d-flex order_card_content_footer j-end font-md">
									<view class="" @tap.stop="comment(item)">备注</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
						<view v-if="closed_order.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
							<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
							<view class="">暂无订单</view>
						</view>
						<view v-else class="order_card m-2 mb-2" @click="virtual_detail(item)" v-for="(item,index) in closed_order" :key="index">
							<view class="order_card_head px-3 py-2">
								<view class="d-flex j-sb font-md pt">
									<view class="d-flex a-center">
										<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
											<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
										</view>
										<view class="">{{item.mobile}}</view>
									</view>
									<view class="text-red">{{item.label_order_status}}</view>
								</view>
								<view class="font d-flex j-sb text-666">
									<view class="">{{item.create_time}}</view>
									<view class="">{{item.order_sn}}</view>
								</view>
							</view>
							<view class="bg-white order_card_content p-3">
								<view class="d-flex py-2" v-for="(items,indexs) in item.goods_items" :key='indexs'>
										<view class="">
											<image class="rounded-20" :src="items.img.url" mode=""></image>
										</view>
										<view class="mx-2 flex-1">
											<view class="ellipsis consignee">{{items.goods_name}}</view>
											<view class="d-flex j-sb mt-4">
												<view class="">{{items.formated_shop_price}}</view>
												<view class="">x{{items.goods_number}}</view>
											</view>
										</view>
								</view>
								<view class="py-2 text-right">共{{item.goods_number}}件，合计：</text><text class="text-000 font-lg font-weight">{{item.formated_total_fee}}</text> </view>
								<view class="d-flex order_card_content_footer j-end font-md">
									<view class="" @tap.stop="order_payment(item)">删除</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>	
		<!-- 备注 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="comment_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999" @click="comment_cancel">取消</view>
					<view class="text-000 font-lg">订单备注</view>
					<view class="text-danger" @click="comment_sub">确定</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 pl-2 bg-white py-3">
					<textarea v-model="comment_order" placeholder="添加订单备注"  @input="comment_change" maxlength="139"></textarea>
				</view>
				<view class="p-4 text-right text-999">{{comment_lenght}}/140</view>
			</view>
		</s-popup>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default{
		components: {
			sPopup
		},
		data(){
			return {
				virtual_bar:[{id:1,name:"全部"},{id:2,name:"待付款"},{id:3,name:"待收货"},{id:4,name:"已完成"},{id:5,name:"已取消"}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollHeight:0, // 屏幕高度
				
				comment_show:false, // 订单备注
				comment_order:"", // 订单备注
				comment_lenght:0, // 长度
				
				all_order:"", // 全部订单列表
				await_pay_order:"",// 待付款
				shipped_order:"",// 待收货
				finished_order:"",// 已完成
				closed_order:"",// 已取消
				u_loadmore:true, // 加载中
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.virtual_tab').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		onShow() {
			if(this.swiperCurrent==0){
				this.$H.post("v2/store/virtual/order/list",{
				}).then(res=>{
					if(res.status.succeed == 1){
						this.all_order=res.data
					}	
				})
			}else if(this.swiperCurrent==1){
				// 待付款
				this.$H.post("v2/store/virtual/order/list",{
					type:"await_pay"
				}).then(res=>{
					if(res.status.succeed == 1){
						this.await_pay_order=res.data
					}	
				})
			}else if(this.swiperCurrent==2){
				// 待收货
				this.$H.post("v2/store/virtual/order/list",{
					type:"shipped"
				}).then(res=>{
					if(res.status.succeed == 1){
						this.shipped_order=res.data
					}	
				})
			}else if(this.swiperCurrent==3){
				// 已完成
				this.$H.post("v2/store/virtual/order/list",{
					type:"finished"
				}).then(res=>{
					if(res.status.succeed == 1){
						this.finished_order=res.data
					}	
				})
			}else if(this.swiperCurrent==4){
				// 已取消
				this.$H.post("v2/store/virtual/order/list",{
					type:"closed"
				}).then(res=>{
					if(res.status.succeed == 1){
						this.closed_order=res.data
					}	
				})
			}
		},
		onLoad() {
			this.$H.post("v2/store/virtual/order/list",{
			}).then(res=>{
				if(res.status.succeed == 1){
					this.u_loadmore=false  
					this.all_order=res.data
				}	
			})
			// 待付款
			this.$H.post("v2/store/virtual/order/list",{
				type:"await_pay"
			}).then(res=>{
				if(res.status.succeed == 1){
					this.await_pay_order=res.data
				}	
			})
			// 待收货
			this.$H.post("v2/store/virtual/order/list",{
				type:"shipped"
			}).then(res=>{
				if(res.status.succeed == 1){
					this.shipped_order=res.data
				}	
			})
			// 已完成
			this.$H.post("v2/store/virtual/order/list",{
				type:"finished"
			}).then(res=>{
				if(res.status.succeed == 1){
					this.finished_order=res.data
				}	
			})
			// 已取消
			this.$H.post("v2/store/virtual/order/list",{
				type:"closed"
			}).then(res=>{
				if(res.status.succeed == 1){
					this.closed_order=res.data
				}	
			})
		},
		methods:{
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 订单备注
			comment(item){
				// this.comment_show=true
				uni.navigateTo({
					url:'/pagesA/order/order-record?order_id='+item.order_id
				})
			},
			comment_change(e){
				this.comment_lenght=e.detail.cursor
				this.comment_order=e.detail.value
			},
			// 备注确认
			comment_sub(){
				this.comment_show=false
				console.log(111)
				// this.$H.post("",{
					
				// }).then(res=>{
				// 	console.log(res)
				// })
			},
			// 备注取消
			comment_cancel(){
				this.comment_show=false
			},
			// 切换
			tab_todat(index){
				this.virtual_index=index
			},
			// 订单详情
			virtual_detail(item){
				uni.navigateTo({
					url:'/pagesA/virtual/virtual-edit?order_id='+item.order_id
				})
			},
			// 确认付款
			virtual_payment(item){
				uni.navigateTo({
					url:'/pagesA/virtual/virtual-payment?order_id='+item.order_id
				})
			},
			// 改价
			virtual_price(item){
				uni.navigateTo({
					url:'/pagesA/order/order-mouse?order_id='+item.order_id
				})
			},
			// 退款
			virtual_refund(item){
				uni.navigateTo({
					url:'/pagesA/virtual/virtual-refund'
				})
			},
			close(item){
				uni.navigateTo({
					url:'/pagesA/order/order-close?order_id='+item.order_id
				})
			},
		}
	}
</script>

<style>
	.bei_zu{
		padding: 3upx 5upx;
		border: 1px solid #FF0000;
		color: #FF0000;
		border-radius: 5upx;
	}
	.order_img{
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
	}
	.order_card{
		border-radius: 50upx;
	}
	.order_card_head{
		background: linear-gradient(to right,#ffeee9,#ffd3cc);
		border-radius: 20upx 20upx 0 0;
	}
	.order_card_head_img{
		width: 45upx;
		height: 30upx;
	}
	.order_card_content{
		border-radius: 0 0 20upx 20upx;	
	}
	.order_card_content image{
		width: 160upx;
		height: 160upx;
	}
	
	.order_card_content_footer view{
		border: 1px solid #999999;
		padding:8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	
	.s-popup-mask{
		background: rgba(0,0,0,0.2)!important;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	
	textarea{
		height: 300upx;
	}
	.consignee{
		height: 84upx;
	}
</style>
